<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:47
 * @Description:
-->
<template>
  <div class="centerLower">
    <com-box :title="lineState.title" class="com-box-title">
      <template #titleLeft>
        <div class="header-left header-box">{{ lineState.unit }}</div>
      </template>
      <template #titleRight>
        <slot name="titleRight" />
      </template>
      <template v-slot>
        <div class="box">
          <loading v-show="lineState.params.loading" />
          <div class="box-line">
            <charts class="line-chart" :params="lineState.params"></charts>
          </div>
        </div>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, onMounted } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
// import loading from '@/charts/loading.vue'

interface IState {
  title?: string
  isGroup: boolean
  unit: any
  itemColor?: any
  params: any
  getData: (goodsId: string) => void
}
interface IObjString {
  [key: string]: boolean
}
export default defineComponent({
  name: 'centerLower',
  components: {
    comBox
    // loading
  },
  props: {
    goodsId: {
      type: String,
      default: ''
    },
    goodsName: {
      type: String,
      default: ''
    },
    classId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    //折线图
    const lineState: IState = reactive({
      isGroup: false,
      title: '-',
      unit: '',
      params: {
        loading: true,
        forceRedraw: true, // 强制重绘
        map: {},
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          legend: {
            right: 0,
            top: 15,
            width: '100%',
            align: 'left',
            selected: {},
            textStyle: {
              fontSize: 14 * 1.5 + 'px',
              color: '#fff'
            }
          },
          xAxis: [
            {
              axisLabel: {
                hideOverlap: true,
                fontSize: 14 * 1.5 + 'px',
                color: '#fff'
              }
            }
          ],
          yAxis: [
            {
              name: ['', ''],
              position: ['left', ''],
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 14 * 1.5 + 'px',
                color: '#fff'
              },
              nameTextStyle: {
                fontSize: 14 * 1.5 + 'px',
                color: '#fff',
                padding: [0, 0, 0, 50]
              }
            }
          ],
          grid: {
            top: 85,
            bottom: 55 * 1.9,
            left: 45,
            right: 15
          },
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '85%',
              left: '10%',
              bottom: 28 * 1.9,
              height: 15 * 1.9,
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff',
                fontSize: 14 * 1.5 + 'px'
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              type: [],
              label: {
                show: false
              },
              connectNulls: true,
              symbolSize: 7 * 1.9, //折线点的大小
              itemStyle: {
                color: [
                  '#5dec9d',
                  '#ea68a2',
                  '#1da7ff',
                  '#ec6941',
                  '#ffba0a',
                  '#d7864a',
                  '#f0ff00',
                  '#432ada',
                  '#0867d6',
                  '#bd64f6',
                  '#0df1ff',
                  '#86bcff',
                  '#93FF00'
                ]
              },
              smooth: true,
              areaStyle: {
                opacity: 0
              }
            }
          ]
        }
      },
      getData: (goodsId) => {
        if (!goodsId || !props.classId) {
          console.warn('缺少必要参数：goodsId或classId')
          lineState.params.loading = false
          return
        }

        lineState.params.loading = true
        httpRequest
          .get({
            url: 'M2P2DgspLine',
            params: { goodsId, classId: props.classId }
          })
          .then((res) => {
            if (!res || !res.map) {
              console.warn('接口返回数据格式错误')
              lineState.params.loading = false
              return
            }

            let arr = Object.keys(res.map).sort((a: any, b: any) => {
              let bData: any = ''
              let aData: any = ''
              isNaN(b.slice(-2)) ? (bData = b.slice(-1)) : (bData = b.slice(-2))
              isNaN(a.slice(-2)) ? (aData = a.slice(-1)) : (aData = a.slice(-2))
              return aData - bData
            })
            let newObj: any = {}
            arr.forEach((item) => {
              newObj[item] = res.map[item]
            })
            const dataVal = Object.values(newObj)
            if (res.code === 200 && dataVal.length > 0) {
              lineState.title = res.title
              lineState.params.options.series[0].type = Array(
                dataVal.length
              ).fill('line')
              const arrToObj: IObjString = {}
              dataVal.forEach((item: any) => {
                if (item === props.goodsName) {
                  arrToObj[item] = true
                } else {
                  arrToObj[item] = false
                }
              })
              lineState.params.options.legend.selected = arrToObj
              lineState.params.options.dataset.dimensions = [
                'name',
                ...Object.keys(newObj)
              ]
              lineState.params.map = newObj
              lineState.params.options.yAxis[0].min = Math.floor(res.min)
              // lineState.params.options.yAxis[0].name = [
              //   `${res.unit}\n\n\n\n`,
              //   ''
              // ]
              lineState.params.options.yAxis[0].name = ['', '']
              lineState.unit = res.unit ? `单位：${res.unit}` : ''
              lineState.params.options.dataset.source = res.data
            } else {
              console.warn('数据为空或接口返回错误')
            }
          })
          .catch((error) => {
            console.error('请求失败:', error)
          })
          .finally(() => {
            lineState.params.loading = false
          })
      }
    })

    const refreshData = () => {
      lineState.getData(props.goodsId)
    }

    watch(
      [() => props.goodsId, () => props.classId],
      ([newGoodsId, newClassId]) => {
        if (newGoodsId && newClassId) {
          lineState.getData(newGoodsId)
        }
      },
      { immediate: true }
    )

    return {
      lineState,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
@MX: 1.9; // 放大倍数
.centerLower {
  width: 700px * @MX;
  height: 450px * @MX;
  .box {
    position: relative;
    height: 100%;
    padding: 7px * @MX 20px * @MX 7px * @MX 5px * @MX;
    .box-line {
      height: 100%;
      width: 100%;
      .line-chart {
        height: 100%;
        width: 100%;
      }
    }
  }
}

.centerLower .com-box-title {
  ::v-deep(.com-header) {
    height: 45px * @MX;
  }
  ::v-deep(.title) {
    font-size: 20px * @MX;
    line-height: 45px * @MX;
    background-size: 264px * @MX 45px * @MX;
    flex: 0 0 264px * @MX;
  }
}
.header-box {
  white-space: nowrap;
  width: 100%;
  height: 100%;
  font-size: 14px * @MX;
  text-align: left;
  color: #46ede8;
  font-family: 'Microsoft YaHei';
  display: flex;
  align-items: flex-end;
  font-weight: bold;
}

.header-left {
  justify-content: flex-start;
  padding: 0px 20px * @MX;
}
</style>
